<template>
  <el-dialog title="添加快捷" top="20px" width="450px" :append-to-body="true" :visible.sync="dialogQuick" @open="openDialog"
    :before-close="closeDialog" v-dialogDrag :lock-scroll="true">
    <div class="form-box">
      <el-form ref="formdata" :model="ruleform" :rules="rules" label-suffix="：" :validate-on-rule-change="false"
        :show-message="false" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="快捷功能" prop="id">
              <treeselect v-model="ruleform.id" :options="deptOptions" :normalizer="normalizer" @select="selectnode"
                placeholder="选择快捷功能" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="快捷名称" prop="title">
              <el-input v-model="ruleform.title" placeholder="请输入菜单名称" clearable />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="">
      <el-button type="primary" :disabled="  ruleform.title=='' || ruleform.menu_type!=='C'" @click="save_validate">保
        存</el-button>
      <el-button @click="closeDialog">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getRouter,SaveQuick
  } from '@/api/menu';

  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: 'Quick',
    props: {
      dialogQuick: {
        // 弹窗开关
        type: Boolean,
        default: false
      }
    },
    components: {
      Treeselect
    },
    data() {
      return {
        deptOptions: [],

        ruleform: {
          id: null,
          title: '',
          menu_type: '',
        },
        rules: {
          title: [{
            required: true,
            message: '快捷名称不能为空'
          }]
        },
      };
    },
    created() {


      getRouter().then(response => {
        this.deptOptions = response.data;
      }).catch(err => {

      });

    },

    methods: {
      selectnode(node) {

        this.ruleform.title = node.menu_name;
        this.ruleform.menu_type = node.menu_type;
         
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.menu_id,
          label: node.menu_name,
          menu_type: node.menu_type,
          children: node.children
        };
      },

      closeDialog() {
        this.$nextTick(() => {
          this.$refs.formdata.resetFields();
          this.$emit('update:dialogQuick', !this.dialogQuick);
        });
      },
      save_validate() {
        this.$refs.formdata.validate((valid, valids) => {
          if (valid) {
            this.saveData();
          } else {
            var msg = '';
            for (var key in valids) {
              var item = valids[key];
              msg = item[0].message;
              break;
            }
            if (msg) this.$message.error(msg);

            return false;
          }
        });
      },

      async saveData() {

        const loading = this.loading('保存中...');
 
        SaveQuick(this.ruleform).then(response => {
          this.$modal.msgSuccess("保存成功");
          loading.close();
          this.closeDialog();
          this.$emit('reload');
        }).catch(err => {
          loading.close();
        });
      },
      async openDialog() {
        this.ruleform = {
          id: null,
          title: '',
          menu_type: '',
        }
      }
    }
  };
</script>

<style scoped>
  .form-box {
    height: 350px;
    mix-height: 500px;
    padding-right: 30px;
    overflow: auto;
  }
</style>
